﻿<phone:PhoneApplicationPage x:Class="ReaderControl.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:Reader="clr-namespace:WP7Contrib.View.Controls.Reader;assembly=WP7Contrib.View.Controls" mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="768"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="PortraitOrLandscape"
                            Orientation="Portrait"
                            OrientationChanged="PhoneApplicationPageOrientationChanged"
                            shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="ShowFontSettingsStoryboard">
            <DoubleAnimation Duration="0:0:0.5"
                             To="1"
                             Storyboard.TargetProperty="(UIElement.Opacity)"
                             Storyboard.TargetName="FontSetting"
                             d:IsOptimized="True" />
            <DoubleAnimation Duration="0:0:0.5"
                             To="-6"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                             Storyboard.TargetName="FontSetting"
                             d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <PowerEase EasingMode="EaseInOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                           Storyboard.TargetName="FontSetting">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="HideFontSettingsStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="FontSetting">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                      Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                           Storyboard.TargetName="FontSetting">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                           Storyboard.TargetName="FontSetting">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                      Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <PowerEase EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="ShowPageNavigationStoryboard">
            <DoubleAnimation Duration="0:0:0.5"
                             To="1"
                             Storyboard.TargetProperty="(UIElement.Opacity)"
                             Storyboard.TargetName="PageNavigation"
                             d:IsOptimized="True" />
            <DoubleAnimation Duration="0:0:0.5"
                             To="0"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                             Storyboard.TargetName="PageNavigation"
                             d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <PowerEase EasingMode="EaseInOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                           Storyboard.TargetName="PageNavigation">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="HidePageNavigationStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="PageNavigation">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                      Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                           Storyboard.TargetName="PageNavigation">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                           Storyboard.TargetName="PageNavigation">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <PowerEase EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                      Value="-123">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <PowerEase EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot"
          Background="Transparent"
          Margin="12,0,12,0">

        <Reader:ReaderControl x:Name="ReaderControl"
                              Background="Black"
                              Height="Auto"
                              Width="Auto"
                              ReaderItemsFontFamily="Segoe WP Bold"
                              ReaderItemsFontSize="24"
                              Foreground="{x:Null}">
            <Reader:ReaderItem Height="{Binding ActualHeight, ElementName=ReaderControl}"
                               Width="{Binding ActualWidth, ElementName=ReaderControl}"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               TextWrapping="Wrap"
                               Text="Start is the beginning of the Windows Phone 7 experience for users after they power on their phone. Start displays application Tiles that users have pinned and placed in a position of their choosing for quick launch. Pressing the Start Button on the phone always returns a user to Start, no matter what application is running. Tiles that use the Tile Notification feature can update the Tile graphic or title text, or increment a counter, enabling users to create a personalized Start experience. Examples include displaying if it is their turn in a game, the weather, or how many email messages they have received.
Start is always presented in portrait view." />
            <Reader:ReaderItem Height="{Binding ActualHeight, ElementName=ReaderControl}"
                               Width="{Binding ActualWidth, ElementName=ReaderControl}"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               TextWrapping="Wrap"
                               Text="The Application Bar provides a place for developers to display up to four of the most common application tasks and views as icon buttons. The Application Bar provides a view that displays icon buttons with text hints and an optional context menu when a user taps the visual indicator of sequential dots or flicks up the Application Bar. This view can be dismissed by tapping outside of the menu area or on the dots, using the back button, or selecting a menu item or Application Bar Icon. The Application Bar always stays on the same edge of the display as the Steering Buttons (Back, Start, and Search) and extends the full width of the screen in portrait or landscape mode. Icon buttons will rotate to align with the three phone orientations. Application Bar buttons can be displayed in an enabled or disabled state. An example of a disabled button would be a delete button in read-only scenarios. The application bar height in portrait mode and width in landscape mode is fixed at 72 pixels and cannot be modified. It can be set to be displayed or hidden." />
            <Reader:ReaderItem Height="{Binding ActualHeight, ElementName=ReaderControl}"
                               Width="{Binding ActualWidth, ElementName=ReaderControl}"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               TextWrapping="Wrap"
                               Text="Think about what types of control schemes fit well with a multitouch device, and break away from simulating traditional controls, such as thumbsticks as they take away useful space from the gameplay area. Instead, use gestures, such as point, stretch, shrink, flick, and turn as user input instead. Allow players to draw paths on the screen to direct units and issue commands; allow them to select groups of units by stretching an on-screen rectangle around them. Allow players to navigate by dragging the landscape with a swipe gesture, or to rotate the view by turning it with two fingers. There are many possibilities for game control using touch, and by choosing a scheme that seems natural and intuitive" />
            <Reader:ReaderItem Height="{Binding ActualHeight, ElementName=ReaderControl}"
                               Width="{Binding ActualWidth, ElementName=ReaderControl}"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               TextWrapping="Wrap"
                               Text="Think about what types of control schemes fit well with a multitouch device, and break away from simulating traditional controls, such as thumbsticks as they take away useful space from the gameplay area. Instead, use gestures, such as point, stretch, shrink, flick, and turn as user input instead. Allow players to draw paths on the screen to direct units and issue commands; allow them to select groups of units by stretching an on-screen rectangle around them. Allow players to navigate by dragging the landscape with a swipe gesture, or to rotate the view by turning it with two fingers. There are many possibilities for game control using touch, and by choosing a scheme that seems natural and intuitive" />
            <Reader:ReaderItem Height="{Binding ActualHeight, ElementName=ReaderControl}"
                               Width="{Binding ActualWidth, ElementName=ReaderControl}"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               TextWrapping="Wrap"
                               Text="Think about what types of control schemes fit well with a multitouch device, and break away from simulating traditional controls, such as thumbsticks as they take away useful space from the gameplay area. Instead, use gestures, such as point, stretch, shrink, flick, and turn as user input instead. Allow players to draw paths on the screen to direct units and issue commands; allow them to select groups of units by stretching an on-screen rectangle around them. Allow players to navigate by dragging the landscape with a swipe gesture, or to rotate the view by turning it with two fingers. There are many possibilities for game control using touch, and by choosing a scheme that seems natural and intuitive" />
            <Reader:ReaderItem Height="{Binding ActualHeight, ElementName=ReaderControl}"
                               Width="{Binding ActualWidth, ElementName=ReaderControl}"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               TextWrapping="Wrap"
                               Text="Think about what types of control schemes fit well with a multitouch device, and break away from simulating traditional controls, such as thumbsticks as they take away useful space from the gameplay area. Instead, use gestures, such as point, stretch, shrink, flick, and turn as user input instead. Allow players to draw paths on the screen to direct units and issue commands; allow them to select groups of units by stretching an on-screen rectangle around them. Allow players to navigate by dragging the landscape with a swipe gesture, or to rotate the view by turning it with two fingers. There are many possibilities for game control using touch, and by choosing a scheme that seems natural and intuitive" />
            <Reader:ReaderItem Height="{Binding ActualHeight, ElementName=ReaderControl}"
                               Width="{Binding ActualWidth, ElementName=ReaderControl}"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               TextWrapping="Wrap"
                               Text="Think about what types of control schemes fit well with a multitouch device, and break away from simulating traditional controls, such as thumbsticks as they take away useful space from the gameplay area. Instead, use gestures, such as point, stretch, shrink, flick, and turn as user input instead. Allow players to draw paths on the screen to direct units and issue commands; allow them to select groups of units by stretching an on-screen rectangle around them. Allow players to navigate by dragging the landscape with a swipe gesture, or to rotate the view by turning it with two fingers. There are many possibilities for game control using touch, and by choosing a scheme that seems natural and intuitive" />
            <Reader:ReaderItem Height="{Binding ActualHeight, ElementName=ReaderControl}"
                               Width="{Binding ActualWidth, ElementName=ReaderControl}"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               TextWrapping="Wrap"
                               Text="Think about what types of control schemes fit well with a multitouch device, and break away from simulating traditional controls, such as thumbsticks as they take away useful space from the gameplay area. Instead, use gestures, such as point, stretch, shrink, flick, and turn as user input instead. Allow players to draw paths on the screen to direct units and issue commands; allow them to select groups of units by stretching an on-screen rectangle around them. Allow players to navigate by dragging the landscape with a swipe gesture, or to rotate the view by turning it with two fingers. There are many possibilities for game control using touch, and by choosing a scheme that seems natural and intuitive" />
        </Reader:ReaderControl>
        <Grid x:Name="FontSetting"
              Height="193"
              Margin="6,6,6,0"
              VerticalAlignment="Bottom"
              Background="#B2000000"
              RenderTransformOrigin="0.5,0.5"
              Opacity="0"
              Visibility="Collapsed">
            <Grid.RenderTransform>
                <CompositeTransform TranslateY="200" />
            </Grid.RenderTransform>
            <StackPanel HorizontalAlignment="Center"
                        Orientation="Horizontal"
                        VerticalAlignment="Top"
                        Margin="0,6,0,0">
                <RadioButton GroupName="FontSize"
                             Checked="FontSizeMediumRadioButtonChecked"
                             BorderBrush="{x:Null}">
                    <StackPanel Orientation="Horizontal"
                                d:LayoutOverrides="Width"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center">
                        <TextBlock TextWrapping="Wrap"
                                   Text="A"
                                   FontSize="{StaticResource PhoneFontSizeMedium}"
                                   Margin="0"
                                   d:LayoutOverrides="Height"
                                   VerticalAlignment="Bottom"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                        <TextBlock TextWrapping="Wrap"
                                   d:LayoutOverrides="Height"
                                   Text="17 pt"
                                   VerticalAlignment="Bottom"
                                   Padding="12,0,0,0"
                                   FontSize="{StaticResource PhoneFontSizeNormal}"
                                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                                   Margin="0,0,0,2" />
                    </StackPanel>
                </RadioButton>

                <RadioButton GroupName="FontSize"
                             Checked="FontSizeLargeRadioButtonChecked"
                             IsChecked="True"
                             BorderBrush="{x:Null}">
                    <StackPanel Orientation="Horizontal"
                                d:LayoutOverrides="Width"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center">
                        <TextBlock TextWrapping="Wrap"
                                   Text="A"
                                   FontSize="{StaticResource PhoneFontSizeLarge}"
                                   Margin="0"
                                   d:LayoutOverrides="Height"
                                   VerticalAlignment="Bottom"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                        <TextBlock TextWrapping="Wrap"
                                   d:LayoutOverrides="Height"
                                   Text="24 pt"
                                   VerticalAlignment="Bottom"
                                   Padding="12,0,0,0"
                                   FontSize="{StaticResource PhoneFontSizeNormal}"
                                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                                   Margin="0,0,0,5" />
                    </StackPanel>
                </RadioButton>

                <RadioButton GroupName="FontSize"
                             Checked="FontSizeExtraLargeRadioButtonChecked"
                             BorderBrush="{x:Null}">
                    <StackPanel Orientation="Horizontal"
                                d:LayoutOverrides="Width"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center">
                        <TextBlock TextWrapping="Wrap"
                                   Text="A"
                                   FontSize="{StaticResource PhoneFontSizeExtraLarge}"
                                   Margin="0"
                                   d:LayoutOverrides="Height"
                                   VerticalAlignment="Bottom"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                        <TextBlock TextWrapping="Wrap"
                                   d:LayoutOverrides="Height"
                                   Text="32 pt"
                                   VerticalAlignment="Bottom"
                                   Padding="12,0,0,0"
                                   FontSize="{StaticResource PhoneFontSizeNormal}"
                                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                                   Margin="0,0,0,9" />
                    </StackPanel>
                </RadioButton>
            </StackPanel>
            <StackPanel HorizontalAlignment="Center"
                        Orientation="Horizontal"
                        VerticalAlignment="Bottom"
                        Margin="0,0,0,6">
                <RadioButton GroupName="FontFace"
                             Checked="FontFamilyLightRadioButtonChecked"
                             BorderBrush="{x:Null}">
                    <TextBlock TextWrapping="Wrap"
                               Text="Light"
                               VerticalAlignment="Bottom"
                               Padding="12,0,0,0"
                               FontSize="{StaticResource PhoneFontSizeNormal}"
                               FontFamily="{StaticResource PhoneFontFamilySemiLight}" />
                </RadioButton>

                <RadioButton GroupName="FontFace"
                             Checked="FontFamilyBoldRadioButtonChecked"
                             IsChecked="True"
                             BorderBrush="{x:Null}">
                    <TextBlock TextWrapping="Wrap"
                               Text="Bold"
                               VerticalAlignment="Bottom"
                               Padding="12,0,0,0"
                               FontSize="{StaticResource PhoneFontSizeNormal}"
                               FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
                </RadioButton>

                <RadioButton GroupName="FontFace"
                             Checked="FontFamilyNormalRadioButtonChecked"
                             BorderBrush="{x:Null}">
                    <TextBlock TextWrapping="Wrap"
                               Text="Normal"
                               VerticalAlignment="Bottom"
                               Padding="12,0,0,0"
                               FontSize="{StaticResource PhoneFontSizeNormal}"
                               FontFamily="{StaticResource PhoneFontFamilyNormal}" />
                </RadioButton>
            </StackPanel>
        </Grid>
        <Grid x:Name="PageNavigation"
              Height="112"
              Margin="6,6,6,0"
              VerticalAlignment="Top"
              Background="#B2000000"
              RenderTransformOrigin="0.5,0.5"
              Opacity="0"
              Visibility="Collapsed">
            <Grid.RenderTransform>
                <CompositeTransform TranslateY="-123" />
            </Grid.RenderTransform>
            <Slider x:Name="slider"
                    VerticalAlignment="Bottom"
                    Minimum="0"
                    Maximum="{Binding Items.Count, ElementName=ReaderControl, Mode=OneTime}"
                    SmallChange="1"
                    Value="{Binding SliderSelectedIndex, ElementName=ReaderControl, Mode=TwoWay}" />
            <StackPanel Height="27"
                        Orientation="Horizontal"
                        VerticalAlignment="Top"
                        d:LayoutOverrides="Width"
                        HorizontalAlignment="Center"
                        Margin="0,6,0,0">
                <TextBlock TextWrapping="Wrap"
                           Text="{Binding Value, ElementName=slider}"
                           d:LayoutOverrides="Height" />
                <TextBlock TextWrapping="Wrap"
                           Text="page of 6"
                           d:LayoutOverrides="Height"
                           Padding="10,0,0,0" />
            </StackPanel>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar x:Name="AppBar"
                              IsVisible="True"
                              IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png"
                                            Click="PagingApplicationBarIconButtonClick"
                                            Text="Paging" />
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png"
                                            Click="FontApplicationBarIconButtonClick"
                                            Text="Font" />
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1" />
                <shell:ApplicationBarMenuItem Text="MenuItem 2" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>